<?php ?>

<!-- ======================================================================
        Sample gallery infinite - Envelops (Preset)
====================================================================== -->

<!-- ■ Javascript Area ■ -->
<script type="text/javascript">
    $(document).ready(function() {
        //썸네일을 누르면 해당 레이어에 아이템을 삽입하는 동작 (예제를 위해 수동으로 삽입한 것이므로 추후 수정)
        $('.thumb_en1_1').click(function() {
            $('.env_inner, .btn_item5').css({'background-image': 'url(../assets/book/editor/item_bg_envelops/envelop_a1.png)'});
        });
        $('.thumb_en1_2').click(function() {
            $('.env_inner, .btn_item5').css({'background-image': 'url(../assets/book/editor/item_bg_envelops/envelop_a2.png)'});
        });
        $('.thumb_en1_3').click(function() {
            $('.env_inner, .btn_item5').css({'background-image': 'url(../assets/book/editor/item_bg_envelops/envelop_a3.png)'});
        });
        $('.thumb_en1_4').click(function() {
            $('.env_inner, .btn_item5').css({'background-image': 'url(../assets/book/editor/item_bg_envelops/envelop_a4.png)'});
        });
        $('.thumb_en1_5').click(function() {
            $('.env_inner, .btn_item5').css({'background-image': 'url(../assets/book/editor/item_bg_envelops/envelop_a5.png)'});
        });
        $('.thumb_en1_6').click(function() {
            $('.env_inner, .btn_item5').css({'background-image': 'url(../assets/book/editor/item_bg_envelops/envelop_a6.png)'});
        });
        $('.thumb_en1_7').click(function() {
            $('.env_inner, .btn_item5').css({'background-image': 'url(../assets/book/editor/item_bg_envelops/envelop_a7.png)'});
        });
        $('.thumb_en1_8').click(function() {
            $('.env_inner, .btn_item5').css({'background-image': 'url(../assets/book/editor/item_bg_envelops/envelop_a8.png)'});
        });
    });
</script>


<!-- ■ HTML Area ■ 
★★★ Tip : 현재 예제를 위해 수동으로 썸네일 링크를 나열했으나 실제로는 변수로 배열 처리 해야한다.
아래 나열된 개수만큼의 링크만 동작 가능하고 무한 스크롤로 생성된 썸네일의 링크는 동작하지 않는다. 
-->

<style type="text/css">
    .item{margin:0 6px 6px 0}
</style>

<div class="gal_con">
    <div class="item thumb_en1_1" style="background-image:url(../assets/book/editor/item_bg_envelops/envelop_a1.png)">
        <img src="../assets/book/editor/images/blank.gif" width="60" height="60" />
    </div>
    <div class="item thumb_en1_2" style="background-image:url(../assets/book/editor/item_bg_envelops/envelop_a2.png)">
        <img src="../assets/book/editor/images/blank.gif" width="60" height="60" />
    </div>
    <div class="item thumb_en1_3" style="background-image:url(../assets/book/editor/item_bg_envelops/envelop_a3.png)">
        <img src="../assets/book/editor/images/blank.gif" width="60" height="60" />
    </div>
    <div class="item thumb_en1_4" style="background-image:url(../assets/book/editor/item_bg_envelops/envelop_a4.png)">
        <img src="../assets/book/editor/images/blank.gif" width="60" height="60" />
    </div>
    <div class="item thumb_en1_5" style="background-image:url(../assets/book/editor/item_bg_envelops/envelop_a5.png)">
        <img src="../assets/book/editor/images/blank.gif" width="60" height="60" />
    </div>
    <div class="item thumb_en1_6" style="background-image:url(../assets/book/editor/item_bg_envelops/envelop_a6.png)">
        <img src="../assets/book/editor/images/blank.gif" width="60" height="60" />
    </div>
    <div class="item thumb_en1_7" style="background-image:url(../assets/book/editor/item_bg_envelops/envelop_a7.png)">
        <img src="../assets/book/editor/images/blank.gif" width="60" height="60" />
    </div>
    <div class="item thumb_en1_8" style="background-image:url(../assets/book/editor/item_bg_envelops/envelop_a8.png)">
        <img src="../assets/book/editor/images/blank.gif" width="60" height="60" />
    </div>
</div>

<?php ?>